<template>
  <teleport to="body">
  <div class="offcanvas offcanvas-start" tabindex="-1" id="userAttr" aria-labelledby="offcanvasExampleLabel">
    <div class="offcanvas-header">
      <h5 class="offcanvas-title" id="offcanvasExampleLabel">人物属性</h5>
      <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
    </div>
    <div class="offcanvas-body">
      <div>
        <table class="table table-bordered table-sm">
          <!--基础属性-->
          <thead class="table-light">
            <tr>
              <th colspan="2" style="text-align: center">基础属性</th>
            </tr>
          </thead>
          <tbody>
          <tr>
            <td scope="col" style="text-align: right;" width="100px">修炼速度</td>
            <td scope="col">{{ this.$store.state.user.userInfo.expSpeed }}</td>
          </tr>
          <tr>
            <td scope="col" style="text-align: right">突破概率</td>
            <td scope="col">{{ this.$store.state.user.userInfo.levelUpOdds }}</td>
          </tr>
          <tr>
            <td scope="col" style="text-align: right">历练速度</td>
            <td scope="col">{{ this.$store.state.user.userInfo.travelSpeed }}</td>
          </tr>
          <tr>
            <td scope="col" style="text-align: right">灵魂强度</td>
            <td scope="col">{{ this.$store.state.user.userInfo.soul }}</td>
          </tr>
          <tr>
            <td scope="col" style="text-align: right">寿元</td>
            <td scope="col">{{ this.$store.state.user.userInfo.life }}</td>
          </tr>
          <tr>
            <td scope="col" style="text-align: right">血量</td>
            <td scope="col">{{ this.$store.state.user.userInfo.hp }}</td>
          </tr>
          <tr>
            <td scope="col" style="text-align: right">总血量</td>
            <td scope="col">{{ this.$store.state.user.userInfo.hpTotal }}</td>
          </tr>
          <tr>
            <td scope="col" style="text-align: right">回血速度</td>
            <td scope="col">{{ this.$store.state.user.userInfo.hot }}</td>
          </tr>
          </tbody>

          <!--道具属性-->
          <thead class="table-light">
          <tr>
            <th colspan="2" style="text-align: center;">道具属性</th>
          </tr>
          </thead>
          <tbody>
          <tr>
            <td scope="col" style="text-align: right;" width="100px">修炼速度</td>
            <td scope="col">{{ this.$store.state.user.userInfo.buff.expSpeed }}</td>
          </tr>
          <tr>
            <td scope="col" style="text-align: right">突破概率</td>
            <td scope="col">{{ this.$store.state.user.userInfo.buff.levelUpOdds }}</td>
          </tr>
          <tr>
            <td scope="col" style="text-align: right">历练速度</td>
            <td scope="col">{{ this.$store.state.user.userInfo.buff.travelSpeed }}</td>
          </tr>
          <tr>
            <td scope="col" style="text-align: right">灵魂强度</td>
            <td scope="col">{{ this.$store.state.user.userInfo.buff.soul }}</td>
          </tr>
          <tr>
            <td scope="col" style="text-align: right">寿元</td>
            <td scope="col">{{ this.$store.state.user.userInfo.buff.life }}</td>
          </tr>
          <tr>
            <td scope="col" style="text-align: right">血量</td>
            <td scope="col">{{ this.$store.state.user.userInfo.buff.hp }}</td>
          </tr>
          <tr>
            <td scope="col" style="text-align: right">回血速度</td>
            <td scope="col">{{ this.$store.state.user.userInfo.buff.hot }}</td>
          </tr>
          </tbody>

          <!--资质属性-->
          <thead class="table-light">
          <tr>
            <th colspan="2" style="text-align: center">资质属性</th>
          </tr>
          </thead>
          <tbody>
          <tr>
            <td scope="col" style="text-align: right;" width="100px">灵根</td>
            <td scope="col">{{ this.$store.state.user.userFlair.name }}</td>
          </tr>
          <tr>
            <td scope="col" style="text-align: right">修为加成</td>
            <td scope="col">{{ this.$store.state.user.userFlair.expSpeed }}%</td>
          </tr>
          <tr>
            <td scope="col" style="text-align: right">突破概率</td>
            <td scope="col">{{ this.$store.state.user.userFlair.levelUpOdds }}%</td>
          </tr>
          <tr>
            <td scope="col" style="text-align: right">学习速度</td>
            <td scope="col">{{ this.$store.state.user.userFlair.studySpeed }}</td>
          </tr>
          </tbody>
        </table>
      </div>

    </div>
  </div>
  </teleport>
</template>

<script>
export default {
  name:"UserAttr"
}
</script>
